<template>
  <div class="app-container">
    <h3>动态组件加载tabs</h3>
    <div class="scroll_container">
      <BaseVScroll :current-component="currentComponent" :scroll-list="scrollList" @onScrollItemClick="onScrollItemClick" @onLoaMoredData="onLoaMoredData" />

    </div>
  </div>
</template>

<script>
import itemContainer from './itemContainer'

export default {
  name: 'A003Vscroll',
  data() {
    return {
      currentComponent: itemContainer,
      scrollList: []

    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },

  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.$bus.$on('onScrollItemClick', this.onScrollItemClick)
      setTimeout(() => {
        const bgArr = ['#c0c4cc', '#46a6fd', '#faebd7', '#13ce66', '#e6a700']
        let count = 0
        for (let index = 0; index < 30; index++) {
          if (count === bgArr.length) {
            count = 0
          }
          this.scrollList.push({ id: index, name: '余胜灵' + index, bg: bgArr[count] })
          count++
        }
      }, 100)
    },
    onScrollItemClick(data) {
      console.log('onScrollItemClick', data)
      this.$message.success('点击' + JSON.stringify(data))
    },
    onLoaMoredData(data) {
      this.$message.success('加载更多数据的API')
      console.log('onScrollItemClick', data)
      this.initData()
    }

  }
}
</script>
<style lang="scss" scoped>
.scroll_container {
    width: 100%;
    height: 70vh;

}

</style>
